<template>
  <div class="shopcart" v-show="visible" @click="visible=false">
    <div class="content" @click.stop="">
        <div class="title">
            已选商品 <span @click="clear">清空</span>
        </div>
        <div class="list">
            <!-- <div class="good" v-for="(item,index) in list" :key="index"> -->
              <!-- 使用 本地vuex中的购物车数据 渲染购物车 -->
            <div class="good" v-for="(item,index) in $store.state.shopcartlist" :key="index">
                <div class="img-box">
                    <img :src="item.picture" alt="">
                </div>
                <div class="text">
                    <div>{{ item.name }}</div>
                    <div>¥{{ item.min_price }}</div>
                </div>
                <div class="opes">
                    <span @click="handleSub(item)">-</span>
                    <span> {{item.count}} </span>  
                    <span @click="handleAdd(item)">+</span>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {shopcart_list,shopcart_clear} from '../utils/api'
import mixin from '../mixins/index'

export default {
    data(){
        return {
            visible:false,
            list:[]
        }
    },
    mixins:[mixin],//局部注册 混入对象
    mounted(){
        
    },
    methods:{
        clear(){
            // 调用异步方法 ( 发请求, 清空购物车 )
            this.$store.dispatch('request_clear');
        }
    }
}
</script>

<style lang="scss">
.shopcart{
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    .content{
        position: absolute;
        bottom: 0;
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        background-color: white;
        .title{
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
        }
    }
}
    .good{
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .img-box{
        width: 70px;
        margin-right: 10px;
        img{
          width: 100%;
        }
      }
      .text{
        flex:1;
      }
      .opes{
        /* position: absolute;
        right: 0;
        bottom: 0; */
        span{
          display: inline-block;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: dodgerblue;
          color: white;
          text-align: center;
          line-height: 16px;
          margin-left: 10px;
        }
        span:nth-child(2){
          color: black;
          background-color: white;
        }
      }
    }
</style>